<template>
  <el-table :data="data" border v-loading="loading">
    <el-table-column
      v-for="col in filterColumns"
      :key="col.label"
      v-bind="col"
    >
      <template v-if="col.slot" #="{row}">
        <slot :name="col.slot" :row="row"></slot>
      </template>

      <template v-if="col.label==='操作'" #header>
        <el-popover placement="bottom" :width="80" trigger="click" :visible="visible">
          <template #reference>
            <div class="title" @click="visible=true">
              <span>操作</span>
              <el-icon><ArrowDown/></el-icon>
            </div>
          </template>
          <el-checkbox-group v-model="tempCheckedLabels">
            <el-checkbox :label="item.label" v-for="item in cbColumns" :key="item.label"/>
          </el-checkbox-group>

          <div>
            <el-button size="small" @click="cancel">取消</el-button>
            <el-button size="small" type="primary" @click="confirm">确定</el-button>
          </div>
        </el-popover>
      </template>

    </el-table-column>
  </el-table>

  <el-pagination
      class="mt-20"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      :page-sizes="[10, 20, 30, 40]"
      layout="prev, pager, next, jumper, ->, sizes, total"
      @current-change="getList"
      @size-change="getList"
    >
    </el-pagination>
</template>

<script lang="ts">
export default {
  name: 'XTable',
}
</script>

<script lang="ts" setup>
import { onMounted, ref, computed } from 'vue'
import {ArrowDown} from '@element-plus/icons-vue'


const props = withDefaults(defineProps<{
  columns: any[]
  getData: (page: number, limit: number) => {},
  pagination: boolean
}>(), {
  pagination: true
})


const data = ref<any[]>([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)


const getList = async () => {
  loading.value = true
  const result: any = await props.getData(currentPage.value, pageSize.value)
  data.value = result.records
  total.value = result.total
  loading.value = false
}

onMounted(() => {
  getList()
})


const visible = ref(false)
const checkedLabels = ref(props.columns.map(col => col.label))  // 确定时才改变
const tempCheckedLabels = ref(checkedLabels.value) // 选择时会自动改变  取消时恢复为checkedLabels
const filterColumns = computed(() => { // 要显示的列
  return props.columns.filter(col => checkedLabels.value.includes(col.label))
})
const cbColumns = computed(() => { // 要显示的所有checkbox对应的列
  return props.columns.filter(col => col.label!=='操作')
})
// 取消
const cancel = () => {
  visible.value = false
  tempCheckedLabels.value = checkedLabels.value
}
// 确定
const confirm = () => {
  visible.value = false
  checkedLabels.value = tempCheckedLabels.value
}
</script>

<style scoped>
  .title {
    width: 80px;
    display: flex;
    align-items: center;
  }
</style>
